<template>
  <div>
<!--    <h3>-->
<!--      当前最新的count值：{{ this.$store.state.count }}-->
<!--    </h3>-->
    <h3>
      {{showNumber}}
    </h3>
    <button @click="increment">+1</button>
    <button @click="incrementN">+N</button>
    <button @click="incrementAsync">+1 Async</button>
    <button @click="incrementAsyncN">+1 Async</button>



  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: "addition",
  methods: {
    increment() {
      this.$store.commit("add")
    },
    incrementN() {
      // commit的作用就是调用某个mutation函数
      this.$store.commit('addN', 3)
    },
    incrementAsync(){
      this.$store.dispatch('addAsync')
    },
    incrementAsyncN(){
      this.$store.dispatch('addAsyncN',2)
    }

  },
  computed:{
    ...mapGetters(['showNumber'])
  }


}
</script>

<style scoped>

</style>
